<template>
	<u-count-down :time="times" format="HH:mm:ss" @change="onChange">
		<view class="time">
			<view class="time__custom">
				<text class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
			</view>
			<text class="time__doc">:</text>
			<view class="time__custom">
				<text class="time__custom__item">{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes }}</text>
			</view>
			<text class="time__doc">:</text>
			<view class="time__custom">
				<text class="time__custom__item">{{ timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds }}</text>
			</view>
		</view>
	</u-count-down>
</template>

<script>
	export default {
		props: {
			times: ''
		},
		data() {
			return {
				timeData: {},
			}
		},
		methods: {
			onChange(e) {
				// console.log(e);
				this.timeData = e
				this.timeData.hours = e.days * 24 + e.hours
			}
		}
	}
</script>

<style lang="scss">
	.time {
		@include flex;
		align-items: center;

		&__custom {
			// margin-top: 4rpx;
			width: 22px;
			height: 22px;
			// background-color: $u-primary;
			border-radius: 4px;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;

			&__item {
				color: #78768A;
				font-size: 22rpx;
				text-align: center;
			}
		}

		&__doc {
			color: #78768A;
			font-size: 22rpx;
			// padding: 0px 2rpx;
		}

		&__item {
			color: #78768A;
			font-size: 22rpx;
			// margin-right: 4rpx;
		}
	}
</style>